<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太极页面</title>
    <style>
        body {
            background: #eee;
        }

        * {
            box-sizing: border-box;
            /*4元素不重叠后还是有点点重合了，所以需要改变核模型 */
            padding: 0;
            margin: 0;
        }

        @keyframes x {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }



        #八卦 {
            /* border: 1px solid red; */
            width: 400px;
            height: 400px;
            border-radius: 50%;
            /*1使之为一个圆 */
            position: relative;
            /*2 position: relative;使元素在同一行 */
            overflow: hidden;
            /* 超过我的部分隐藏，即圆形之外 */
            animation: x 5s infinite linear;
            box-shadow: 0px 0px 5px 3px rgba(0, 0, 075);
            /* CSS3属性 */
        }

        @media(max-width: 500px) {
            #八卦 {
                width: 200px;
                height: 200px;
            }
        }

        #八卦>div:first-child {
            /* border: 1px solid green; */
            width: 50%;
            height: 100%;
            position: absolute;
            left: 0;
            /* 3left: 0; right: 0;使元素不重叠  */
            background: black;
        }


        #八卦>div:nth-child(2) {
            /* border: 1px solid blue; */
            width: 50%;
            height: 100%;
            position: absolute;
            right: 0;
            background: white;
        }

        #八卦>div:nth-child(3) {
            /* border: 100px solid yellow; */
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            /*  此题特殊可以直接left: 25%; 不用回退自身的一半*/
            border-radius: 50%;
            background: black;
        }

        @media(max-width: 500px) {
            #八卦>div:nth-child(3) {
                width: 100px;
                height: 100px;
                margin-left: -50px;
            }
        }


        #八卦>div:nth-child(4) {
            /* border: 100px solid yellow; */
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            /*  此题特殊可以直接left: 25%; 不用回退自身的一半*/
            border-radius: 50%;
            background: white;
            bottom: 0;
        }

        @media(max-width: 500px) {
            #八卦>div:nth-child(4) {
                width: 100px;
                height: 100px;
                margin-left: -50px;
            }
        }

        #八卦>div:nth-child(5) {
            /* border: 100px solid yellow; */
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            margin-left: -25px;
            /*  此题特殊可以直接left: 25%; 不用回退自身的一半*/
            border-radius: 50%;
            background: white;
            top: 75px;
        }

        @media(max-width: 500px) {
            #八卦>div:nth-child(5) {
                width: 25px;
                height: 25px;
                margin-left: -12.5px;
                top: 37.5px;
            }
        }


        #八卦>div:nth-child(6) {
            /* border: 100px solid yellow; */
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            margin-left: -25px;
            /*  此题特殊可以直接left: 25%; 不用回退自身的一半*/
            border-radius: 50%;
            background: black;
            bottom: 75px;
        }

        @media(max-width: 500px) {
            #八卦>div:nth-child(6) {
                width: 25px;
                height: 25px;
                margin-left: -12.5px;
                bottom: 37.5px;
            }
        }

        #八卦-wrapper {
            /* border: 1px solid red; */
            height: 100vh;
            /*viewpoint height用户屏幕可视范围*/
            display: flex;
            /*A flex默认会把里面的元素横的一致排开*/
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /*B 需要加这个才会竖直排列*/

        }

        #八卦-描述 {
            margin-top: 2em;
            /* em表示一个字的宽度，大概16px */
        }
    </style>
</head>

<body>
    <div id="八卦-wrapper">
        <!-- 一个容器包裹wrapper -->
        <div id="八卦">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="八卦-描述">
            道可道，非常道
        </div>
    </div>

</body>

</html>
